<template>
  姓：<input type="text" v-model="person.firstName">
  <br>
  名：<input type="text" v-model="person.lastName">
  <br>
  全名:{{person.fullName}}
</template>

<script>
import { reactive,computed } from "vue";
export default {
  name: "Demo",
  beforeCreate() {},
  
  setup(props,context) {
    
    let person = reactive({
      firstName: "张",
      lastName:'三',
      age: 18,
    });
    
    // 计算属性
    /* person.fullName = computed(()=>{
        return person.firstName + '-' + person.lastName;
    }) */
    person.fullName = computed({
        get(){
            return person.firstName + '-' + person.lastName;
        },
        set(val){
            const nameArr = val.split('-');
            person.firstName = nameArr[0];
            person.lastName = nameArr[1];
        }
    });

    return {
      person,
    };
  },
};
</script>